<template>
	<view class="">
		<view class="header1">
			<view class="ipt-box">
				<input v-model="title" type="text" value="" placeholder="请输入您要搜索的内容" placeholder-class="plac-class" />
				<image src="/static/search1.png" mode="" @tap="searchClick"></image>
			</view>
			<view class="header1-right" @tap="clousText">
				<input type="text" class="select" v-model="label" disabled />
				<u-icon :name="show?'arrow-up-fill':'arrow-down-fill'"></u-icon>
			</view>
		</view>
		<view class="content">
			<view class="content-item" v-for="i in list" @tap="$navTo('means?id='+i.id)">
				<image class="item-img" :src="i.file" mode=""></image>
				<view class="item-content">
					<text class="content-title">{{i.file_name}}</text>
					<text class="content-time">{{i.start_date}}</text>
				</view>
			</view>
		</view>
		<u-select v-model="show" label-name="name" value-name="id" :list="options" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				list: [],
				options: [],
				value: '',
				label: '',
				show: false
			}
		},
		onLoad() {
			this.typeList()
		},
		methods: {
			searchClick() {
				if (this.title) {
					this.init()
				} else {
					this.$showToast('请输入要搜索的内容')
				}
			},
			clousText() {
				this.show = true
			},
			confirm(e) {
				console.log(e);
				this.label = e[0].label
				this.value = e[0].value
				this.init()
			},
			init() {
				let _this = this
				uni.request({
					url: this.$url + 'relevant.tips_data/getTipsDataList',
					method: 'GET',
					header: {
						token: uni.getStorageSync('token'),
					},
					data: {
						title: this.title,
						type:this.value
					},
					success: res => {
						console.log(res);
						_this.list = res.data.data
					},
					fail: () => {},
					complete: () => {}
				});
			},
			typeList(){
				let _this = this
				uni.request({
					url: this.$url + 'relevant.tips_type/getTipsTypeList',
					method: 'GET',
					header: {
						token: uni.getStorageSync('token'),
					},
					success: res => {
						console.log(res);
						_this.options = res.data.data
						_this.label = _this.options[0].name
						_this.value = _this.options[0].id
						this.init()
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.header1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		height: 80rpx;
		width: 100%;
		background-color: #003690;
		padding: 0 40rpx;

		.ipt-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 20rpx;
			width: 474rpx;
			height: 52rpx;
			background-color: #fff;
			border-radius: 24rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.header1-right {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #E2ECFB;
			justify-content: flex-end;

			.select {
				text-align: end;
				padding-right: 20rpx;
			}
		}
	}

	.content {
		padding: 0 23rpx;

		.content-item {
			padding: 16rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #DDDDDD;

			.item-img {
				width: 61rpx;
				height: 74rpx;
			}

			.item-content {
				display: flex;
				flex-direction: column;
				margin-left: 14rpx;

				.content-title {
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}

				.content-time {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					margin-top: 12rpx;
				}
			}
		}
	}
</style>
